<template>
  <div v-if="homeshow">
    <!-- fix: 新UI -->
    <el-card class="box-card cardBg ">
      <div class="titleName">
        企业审核
      </div>
      <el-row :gutter="20" type="flex" justify="space-around">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <div class="grid-content grid-con-1">
              <div class="grid-cont-right">
                <div class="grid-txt">企业认证 &nbsp; <span class="spot"></span></div>
                <div class="grid-num" @click="urlTo(1)"> <span class="nums">{{count.companyCount || 0}}</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <div class="grid-content grid-con-1">
              <div class="grid-cont-right">
                <div class="grid-txt">员工认证 &nbsp; <span class="spot"></span></div>
                <div class="grid-num" @click="urlTo(2)"> <span class="nums">{{count.staffCount || 0}}</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <div class="grid-content grid-con-1">
              <div class="grid-cont-right">
                <div class="grid-txt">社保认证 &nbsp; <span class="spot"></span></div>
                <div class="grid-num" @click="urlTo(3)"> <span class="nums">{{count.securityCount || 0}}</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 职位审核 -->
    <el-row :gutter="20" class="rlRow">
      <el-col>
        <el-card shadow="hover" class="box-card examine">
          <div class="titleName textCol">
            简历审核
          </div>
          <div class="gridContent">
            <div class="grid-content grid-con-2">
              <div class="grid-cont-right">
                <div class="grid-txt">未上传照片 &nbsp; <span class="spotTwo"></span></div>
                <div class="grid-num"> <span class="_nums">{{count.notUploaded || 0}}</span>
                </div>
              </div>
            </div>
            <div class="grid-content grid-con-2">
              <div class="grid-cont-right">
                <div class="grid-txt">简历审核 &nbsp; <span class="spotTwo"></span></div>
                <div class="grid-num"> <span class="nums" @click="urlTo(8)">{{count.resumeCount || 0}}</span></div>
              </div>
            </div>
            <div class="grid-content grid-con-2">
              <div class="grid-cont-right">
                <div class="grid-txt">照片审核 &nbsp; <span class="spotTwo"></span></div>
                <div class="grid-num"> <span class="nums" @click="urlTo(9)">{{count.photoCount || 0}}</span></div>
                <div></div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 内容审核 -->
    <el-row :gutter="20" class="rlRow">
      <el-col :span="8">
        <el-card shadow="hover" class="box-card examine">
          <div class="titleName textCol">
            职位审核
          </div>
          <div class="grid-content grid-con-2">
            <div class="grid-cont-right">
              <div class="grid-txt">职位审核 &nbsp; <span class="spotTwo"></span></div>
              <div class="grid-num" @click="urlTo(4)"> <span class="nums">{{count.jobCount || 0}}</span></div>
            </div>
          </div>
        </el-card>

      </el-col>
      <el-col :span="16">
        <el-card shadow="hover" class="box-card examine">
          <div class="titleName textCol">
            企业参加招聘会
          </div>
          <div class="gridContent">
            <div class="grid-content grid-con-2">
              <div class="grid-cont-right">
                <div class="grid-txt">招聘会审核 &nbsp; <span class="spotTwo"></span></div>
                <div class="grid-num" @click="urlTo(6)"> <span class="nums">{{count.jobFairCount || 0}}</span>
                </div>
                <div></div>
              </div>
            </div>
            <div class="grid-content grid-con-2">
              <div class="grid-cont-right">
                <div class="grid-txt">参会审核 &nbsp; <span class="spotTwo"></span></div>
                <div class="grid-num" @click="urlTo(7)"> <span class="nums">{{count.jobFairDetailsCount || 0}}</span>
                </div>
                <div></div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 投诉 -->
    <el-row :gutter="20" class="rlRow">
      <el-col :span="8">
        <el-card shadow="hover" class="box-card examine">
          <div class="titleName textCol">
            内容审核
          </div>
          <div class="grid-content grid-con-2">
            <div class="grid-cont-right">
              <div class="grid-txt">新闻公告审核 &nbsp; <span class="spotTwo"></span></div>
              <div class="grid-num" @click="urlTo(5)"> <span class="nums">{{count.newsCount || 0}}</span>
              </div>
              <div></div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card shadow="hover" class="box-card examine">
          <div class="titleName textCol">
            投诉
          </div>
          <div class="gridContent">
            <div class="grid-content grid-con-2">
              <div class="grid-cont-right">
                <div class="grid-txt">简历投诉 &nbsp; <span class="spotTwo"></span></div>
                <div class="grid-num" @click="urlTo(10)"> <span class="nums">{{count.resumeComplaintCount || 0}}</span>
                </div>
                <div></div>
              </div>
            </div>
            <div class="grid-content grid-con-2">
              <div class="grid-cont-right">
                <div class="grid-txt">职位投诉 &nbsp; <span class="spotTwo"></span></div>
                <div class="grid-num" @click="urlTo(11)"> <span class="nums">{{count.jobComplaintCount || 0}}</span>
                </div>
                <div></div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { examineCount } from '../../api/index';
export default {
  name: 'dashboard',
  data () {
    return {
      count: {},
      homeshow: true
    };
  },
  methods: {
    changeDate () {
      const now = new Date().getTime();
      this.data.forEach((item, index) => {
        const date = new Date(now - (6 - index) * 86400000);
        item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
      });
    },
    // 请求数据
    examineCount () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.2)'
      });
      examineCount().then((res) => {
        if (res.success) {
          console.log(res, 4564656564656)
          loading.close()
          this.count = res.data
        } else {
          loading.close()
        }
      })
    },
    // 按照顺序来的 数字
    urlTo (num) {
      switch (num) {
        // 企业认证 点击数字跳转企业列表
        case 1:
          this.$router.push({
            path: '/companyList',
            query: {
              authStatus: '1'
            }
          })
          break;
        //员工认证 点击数字跳转企业账号列表
        case 2:
          this.$router.push({
            path: '/companyAccount',
            query: {
              staffAuthStatus: 1
            }
          })
          break;
        //社保认证 点击数字跳转企业账号列表
        case 3:
          this.$router.push({
            path: '/companyList',
            query: {
              socialSecurityAuthStatus: '1'
            }
          })
          break;

        //职位审核 点击数字跳转职位列表
        case 4:
          this.$router.push({
            path: '/jobList',
            query: {
              status: '0'
            }
          })
          break;

        //内容审核 点击数字跳转新闻公告列表
        case 5:
          this.$router.push({
            path: '/news',
            query: {
              auditStatus: 0
            }
          })
          break;

        //招聘会审核 点击数字跳转招聘会列表
        case 6:
          this.$router.push({
            path: '/JobFairList',
            query: {
              auditStatus: '0'
            }
          })
          break;

        //参会审核 点击数字跳转参会企业列表
        case 7:
          this.$router.push({
            path: '/participating',
            query: {
              auditStatus: '0'
            }
          })
          break;
        //简历审核 点击数字跳转简历列表
        case 8:
          this.$router.push({
            path: '/resumeList',
            query: {
              auditStatus: '0'
            }
          })
          break;

        //照片审核 点击数字跳转简历列表
        case 9:
          this.$router.push({
            path: '/resumeList',
            query: {
              photoAuditStatus: '0'
            }
          })
          break;

        //简历投诉管理 点击数字跳转简历投诉管理
        case 10:
          this.$router.push({
            path: '/resumeComplaint',
            query: {
              status: '0'
            }
          })
          break;

        //职位投诉管理 点击数字跳转职位投诉管理
        case 11:
          this.$router.push({
            path: '/positionComplaint',
            query: {
              status: 0
            }
          })
          break;
        default:
          break;
      }
    }
  },
  created () {
    let show = localStorage.getItem('homeshow')
    show = JSON.parse(show)
    console.log(show, 'show')
    this.homeshow = show
    this.examineCount()
  }

};
</script>


<style scoped>
.cardBg {
    height: 150px;
    background: linear-gradient(270deg, rgba(47, 111, 230, 1) 0%, rgba(55, 80, 186, 1) 100%);
    opacity: 1;
    border-radius: 8px;
}
/* fix 新 UI */
.titleName {
    font-size: 26px;
    font-family: PingFang SC;
    font-weight: 600;
    text-indent: 40px;
    line-height: 37px;
    color: rgba(255, 255, 255, 1);
    position: relative;
}

.titleName::before {
    position: absolute;
    left: 15px;
    top: 7px;
    content: '';
    width: 4px;
    height: 25px;
    background: rgba(0, 147, 255, 1);
    opacity: 1;
    border-radius: 5px;
}
.textCol {
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 600;
    color: rgba(54, 54, 54, 1);
    position: relative;
    text-indent: 40px;
}
.textCol::before {
    position: absolute;
    left: 15px;
    top: 7px;
    content: '';
    width: 4px;
    height: 25px;
    background: #3346a9;
    opacity: 1;
    border-radius: 5px;
}

.spot {
    width: 8px;
    height: 8px;
    display: inline-block;
    background: rgba(75, 126, 252, 1);
    border-radius: 50%;
    opacity: 1;
}

.spotTwo {
    width: 8px;
    height: 8px;
    display: inline-block;
    background: rgba(204, 204, 204, 1);
    border-radius: 50%;
    opacity: 1;
}

.examine {
    height: 160px;
    border-radius: 10px;
}

.gridContent {
    display: flex;
    justify-content: space-around;
}

.rlRow {
    margin-top: 10px;
}

.titleTip {
    line-height: 60px;
}
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-cont-right {
    text-align: center;
    font-size: 14px;
    /* color: #999; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-num,
.grid-txt {
    font-size: 28px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-txt {
    font-weight: 600;
    line-height: 40px;
    color: rgba(255, 255, 255, 1);
}
.grid-num {
    font-size: 28px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 40px;
    color: rgba(40, 239, 178, 1);
    text-indent: 0px;
}

.grid-con-1 .grid-num {
    color: rgba(40, 239, 178, 1);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}
.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.nums {
    cursor: pointer;
    margin-left: 15px;
    line-height: 32px;
}
._nums {
    margin-left: 15px;
    line-height: 32px;
}
</style>
